<template>
    <div :class="{'ly-is-full':isFull}">
        <div class="tableSelect" ref="tableSelect">
            
        </div>
        <div class="table">
            <div  class="space-inner">
                <div class="lycard">
                    <div class="space-header">
                        <div class="lycard-left space-header-title">报价审核</div>
                        <div class="lycard-right">
                            <div @click="setFull">
                                <el-tooltip content="全屏" placement="bottom">
                                    <el-icon ><full-screen /></el-icon>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                    <div class="space-main">
                        <Editor style="height: 550px;" :data="data" :svg="svg" :view='{
                            "width":width,
                            "height":height,
                            "offsetx":offsetx,
                            "offsety":offsety
                        }'></Editor>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { lyMixins } from "@/mixins/mixins"
    import Editor from "../../components/editor/index.vue";  
    import {mallPojectDetail} from '@/api/api'
    export default {
        mixins: [lyMixins],
        name:'priceManager',
        components:{
            Editor
        },
        data() {
            return {
                isFull:false,
                svg:"",
                width:0,
                height:0,
                docwidth:0,
                docheight:0,
                offsetx:0,
                offsety:0,
                data:[]
            }
        },
        methods:{
            setFull(){
                this.isFull=!this.isFull
                window.dispatchEvent(new Event('resize'))
            },
            //获取列表
            async getData(id){
                this.loadingPage = true
                mallPojectDetail(id).then(res => {
                     this.loadingPage = false
                     if(res.code ==2000) {
                        this.data = res.data.data.data==null?[]:res.data.data.data
                        this.svg = res.data.data.svg
                        this.width = res.data.data.view_width
                        this.height = res.data.data.view_height
                        this.docwidth = res.data.data.width
                        this.docheight = res.data.data.height
                        this.offsetx = res.data.data.offsetx
                        this.offsety = res.data.data.offsety
                     }
                 })
            },
        },
        created() {
            //console.log(this.$route.query.id)
            this.getData(this.$route.query.id)
        },
    }
</script>
<style scoped>
    .space-inner{
        height: 500px;
    }
    .lycard{
        background: var(--el-bg-color);
        box-shadow: var(--el-box-shadow-light);
        border: 1px solid var(--el-border-color-light);
    }
    .space-header{
        border-bottom: 1px solid var(--el-color-info-light-7);
        font-size: 14px;
        padding: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .space-header-title{
        padding: 8px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: 10px;
    }
    .space-main{
        padding: 20px;
        height: 600px
    }
    .space-main-up{
        display: flex;
        align-items: center;
        column-gap: 20px;
        /*justify-content: space-around;*/
    }
    .space-main-up-cpu{
        font-size: 12px;
        display: flex;
        flex-direction: column;
        line-height: 20px;
        /*width: 200px;*/
        color: #666666;
    }
    ::v-deep(.el-col) {
        margin-bottom: 11px;
    }
</style>
